<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>省市联动</title>
    </head>
    <body>

        <select class="p">
            <option value="none">请选择省份</option>
        </select>

        <select class="c">
            <option value="none">请选择城市</option>
        </select>

        <script type="text/javascript">
            const pc = {
                '陕西省' : [ '西安市' , '宝鸡市' , '咸阳市' , '汉中市' , '榆林市' , '渭南市' , '延安市' , '商洛市' , '铜川市' ] ,
                '甘肃省' : [ '兰州市' , '武威市' , '酒泉市' , '张掖市' , '金昌市' , '嘉峪关市' , '天水水'  , '定西市' , '庆阳市' , '陇南市' , '临夏' , '白银市' , '平凉市' , '甘南' ],
                '四川省' : [ '成都市' , '攀枝花市' , '绵阳市' , '德阳市' , '广元市' , '泸州' , '宜宾市' ]
            }

            function add( parent , names ) {
                names.forEach( name => {
                    let op = document.createElement( 'option' );
                    op.innerHTML = name ;
                    op.value = name.substring( 0 , name.length - 1 ) ;
                    parent.appendChild( op );
                } );
            }

            function remove( select ){
                let ops = select.options ;
                for( let i = ops.length - 1 ; i > 0 ; i-- ){
                    let op = ops[ i ];
                    console.log( op , ops.length );
                    select.removeChild( op );
                }
            }

            let names = Object.getOwnPropertyNames( pc );
            console.log( names );

            const p = document.querySelector( '.p' );
            add( p , names );

            const c = document.querySelector( '.c' );

            let changeListener = {
                handleEvent(event){
                    let target = event.target ;
                    console.dir( target );
                    // 对于select来说，可以通过options来其内部所有的option组成的集合
                    let ops = target.options ;
                    console.dir( ops );
                    // 在options集合中有一个selectedIndex属性表示被选择的选项
                    let index = ops.selectedIndex ;
                    let op = ops[ index ];
                    console.log( op );
                    let pr = op.innerText ;
                    // 根据选择的元素获得相应省份对应的城市数组
                    let arr = pc[ pr ] ;
                    remove( c );
                    add( c , arr );
                }
            }

            p.addEventListener( 'change' , changeListener , false );

        </script>
        
    </body>
</html>